<template>
  <div id="top-header">
    <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
    <div
      class="center-title"
      style="display: flex; justify-content: space-between"
    >
      <!--  style="display: flex; justify-content: space-between" -->
      <!-- <el-button style="margin-right: 1%" size="mini">123</el-button> -->
      <!-- <span
        size="mini"
        type="primary"
        style="font-size: 12px; margin-top: 15px; cursor: pointer"
        @click="cancel"
        >上一页</span
      > -->
      <span> 综合数据</span>
      <!-- <div class="text_right"> -->
      <Screenfull id="screenfull" class="right-menu-item hover-effect" />
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import Screenfull from "@/views/components/Screenfull/index.vue";

export default {
  name: "TopHeader",

  components: {
    Screenfull,
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
#top-header {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;

  .header-center-decoration {
    width: 50%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration,
  .header-right-decoration {
    width: 25%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }
}
.text_right {
  text-align: right;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #23cefd;
  // padding-right: 1%;
  display: flex;
  justify-content: end;
  z-index: 1001px;
}
</style>
